<template>
    <div class="app-role">
      <h3>banner图管理</h3>
      <el-tabs v-model="activeName" size="small" class="demo-tabs" @tab-change="handleChange">
        <el-tab-pane label="首页banner图" name="1"></el-tab-pane>
        <el-tab-pane label="分类banner图" name="2"></el-tab-pane>
        <el-tab-pane label="购物车banner图" name="3"></el-tab-pane>
        <el-tab-pane label="我的banner图（上）" name="4"></el-tab-pane>
        <el-tab-pane label="我的banner图（下）" name="5"></el-tab-pane>
      </el-tabs>
     <Query
       :items="queryColumns"
       :initial-params="queryParams"
       @query="handleQuery"
       labelWidth="100px"
     />
     <Table
       :table-columns="tableColumns"
       :table-loading="tableLoading"
       :table-data="tableData"
       :total="total"
       @pagination="handlePagination"
       :tree-props="{ children: 'children', hasChildren:'hasChildren',icon:'Plus' }"
     >
        <template v-slot:tools>
            <el-button-group>
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </el-button-group>
        </template>
       <template #coverImg="{row}">
          <div class="productName_box">
            <img class="productName_img" :src="row.coverImg" />
          </div>
       </template>
       <template #type="{row}">
          {{ row.type=='1'?'首页banner图':row.type=='2'?'分类banner图':row.type=='3'?'购物车banner图':row.type=='4'?'我的banner图（上）':row.type=='5'?'我的banner图（下）':'' }}
       </template>
       <template #jumpUrl="{row}">
        <el-button type="primary" link @click="openPage(row.jumpUrl)">{{row.jumpUrl}}</el-button>
       </template>
       <template #status="{row}">
        <div>
          <span class="status-circle" :class="{
            greenStatus:row.status ==1,
            grayStatus:row.status !=1,
            }"></span>
          <span>{{ row.status==1?'正常':'下架' }}</span>
        </div>
       </template>
       <template #opt="scope">
         <el-button type="primary" link @click="handleAdd(scope.row)">编辑</el-button>
         <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
       </template>
     </Table>
     <el-dialog v-model="showDialog" :title="dialogTitle" width="600">
        <el-row>
          <el-col :span="22">
            <el-form ref="refForm" :model="formData" :rules="formRules" size="default">
              <el-form-item label="展示位置" label-width="100px" >
                <el-input :value="activeName=='1'?'首页banner图':activeName=='2'?'分类banner图':activeName=='3'?'购物车banner图':activeName=='4'?'我的banner图（上）':activeName=='5'?'我的banner图（下）':''" disabled></el-input>
              </el-form-item>
              <el-form-item label="图片" label-width="100px" >
                <ImageUpload
                  v-model="formData.coverImg"
                  :limit="1"
                  listType="picture-card"
                >
                </ImageUpload>
              </el-form-item>
              <el-form-item label="跳转地址" label-width="100px" >
                <el-input v-model="formData.jumpUrl" placeholder="请输入跳转地址"></el-input>
              </el-form-item>
              <el-form-item label="展示时间" label-width="100px" >
                <el-date-picker
                  v-model="formData.dateTime"
                  type="daterange"
                  unlink-panels
                  format="YYYY-MM-DD HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <el-form-item label="排序" label-width="100px" >
                <el-input-number v-model="formData.sortNum" placeholder="请输入排序，数字越大，排序越靠前"  :step="1" :maxlength="10" :min="0" style="width: 100%;"></el-input-number>
              </el-form-item>
              <el-form-item label="一句话描述" label-width="100px" >
                <el-input v-model="formData.description" placeholder="请输入一句话描述"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="default">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="productTemeplate">
  import Table from "@/components/Table/index.vue";
  import Query from "@/components/Query/index.vue";
  import DialogForm from '@/components/FormDialog/index.vue'
  import { formatDate } from '@/utils'
  import { getBannerList,saveBanner } from "@/api/banner";
  
  const { proxy } = getCurrentInstance()
  const tableData = ref([])
  const tableData2 = ref([])
  const total = ref(0)
  const total2 = ref(0)
  const tableLoading = ref(true)
  const tableLoading2 = ref(true)
  const dialogTitle = ref('')
  const loading = ref(false)
  const refForm = ref(null)
  const showDialog = ref(false)
  const router = useRouter();
  const skuList = ref([])
  const activeName = ref('1')
  const formData = ref({
  })
  const formRules = ref({
    
  })
  const detailId = ref(null)
  const detailData = ref({})
  
  const data = reactive({
   tableColumns: [
     { label: "展示位置",prop: "type",slot: 'type',},
     { label: "图片", prop: "coverImg",slot: 'coverImg', },
     { label: "跳转地址", prop: "jumpUrl",slot: 'jumpUrl',width:160 },
     { label: "开始时间", prop: "gmtStart" },
     { label: "结束时间", prop: "gmtEnd" },
     { label: "排序", prop: "sortNum" },
     { label: "状态", prop: "status",slot: 'status', },
     
     { label: "操作", fixed:'right', prop: "opt", slot: 'opt',width:120},
   ],
   queryColumns: [
   ],
   pageParams: {
    current: 1,
    size: 10
   },
   queryParams: {},
   formItems: [
  
   ]
  })
  const allLogisticList = ref([])// 物流公司
  const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
  const handleChange = (tab, event) => {
    queryParams.value.current = 1
    getList()
  }
  /** 获取列表数据 */
  const getList = () => {
    tableLoading.value = true
    const data  = {
      ...pageParams.value,
      type:activeName.value,
    }
    getBannerList(data)
    .then(res => {
      let list = res.data.records || []
       tableData.value = list
       total.value = res.data.total
    })
    .finally(() => {
       tableLoading.value = false
    })
  }
  
  getList()
  
  const openPage = (url)=>{
    window.open(url)
  }
  /** 搜索按钮操作 */
  const handleQuery = (val) => {
   queryParams.value = val
   getList()
  }
  /** 打开发货弹窗 */
  const handleAdd = (row) => {
    dialogTitle.value = row?'编辑':'新增'
    if(row){
      formData.value = {
        ...row,
        dateTime:[row.gmtStart,row.gmtEnd]
      }
    }else{
      formData.value = {}
    }
    detailId.value = row?.id
    showDialog.value = true
  }
  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除此数据？').then(function() {
      saveBanner({id: row.id, delFlag: -1}).then(() => {
        getList()
        proxy.$modal.msgSuccess("删除成功")
      })
    })
  }
  const handlePagination = (val) => {
   pageParams.value = val
   getList()
  }
  
  const handleSubmit = ()=>{
    refForm.value.validate(valid => {
      if (!valid) return
      let dateTime = formData.value.dateTime || []
      let params = {
        ...formData.value,
        type:activeName.value,
        gmtStart:dateTime[0]&&formatDate(dateTime[0]),
        gmtEnd:dateTime[1]&&formatDate(dateTime[1]),
        id:detailId.value || null,
      }
      saveBanner(params).then(res=>{
        showDialog.value = false
        proxy.$modal.msgSuccess("保存成功")
        pageParams.value.current = 1
        getList()
      })
    })
  }
  </script>
  
  <style lang="scss" scoped>
  .productName_box{
    display: flex;
    align-items: center;
    .productName_img{
      width: 80px;
      height: 80px;
      object-fit: contain;
      margin-right: 8px;
    }
    span{
  
    }
  }
  .app-role {
   padding: 8px
  }
  .product_tem_wrap{
    display: flex;
    width: 100%;
    max-height: 400px;
    overflow: auto;
    flex-wrap: wrap;
    padding: 20px 0;
    padding-left:20px;
  }
  .product_tem_box{
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: pointer;
    height: 90px;
    margin-bottom: 20px;
    margin-right: 3%;
    padding: 10px;
    width: 30%;
    display: flex;
    .product_tem_img{
      width: 68px;
      height: 68px;
      margin-right: 8px;
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .product_tem_name{
      flex: 1;
    }
    .product_tem_name_text{
      height: 40px;
      line-height: 20px;
      margin-bottom: 6px;
      max-width: 150px;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal !important;
      word-break: break-all;
    }
    .product_tem_typeName{
      color: #c4c4c3;
    }
  }
  .product_tem_box:hover{
    border-color: #4a89f0;
  }
  
  :deep(.sku-img-wrap) {
    cursor: pointer;
    .el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item-actions,.el-upload-list--picture-card .el-upload-list__item{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
    }
    img{
      width: 80px;
      height: 80px;
      object-fit: contain;
      cursor: pointer;
    }
  }
  </style>